<template>
  <div>
    <el-container style="height: 696px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px;width: 100%;">
          <Top></Top>
        </el-header>
        <el-main>
          <div><el-container>
            <el-header style="background-color: lightblue"><h2>个人信息</h2></el-header>
            <el-container>
              <el-aside width="200px">
                <div>
                  <el-upload
                    style="margin: 50px auto;width: 100%;height: 100%;"
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </el-aside>
              <el-container>
                <el-main>
                  <div>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
                      <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
                    </el-row>

                  </div>
                </el-main>
              </el-container>
            </el-container>
          </el-container></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Left from '@/components/studentSide/left'
import Top from '@/components/studentSide/top'
export default {
  name: 'studentPeopleInfo',
  data () {
    return {
      imageUrl: ''
    }
  },
  components: {
    Left,
    Top
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
<style scoped>
.router-link-active {
  text-decoration: none;
  color: yellow;
}
a{
  text-decoration: none;
  color: white;
}
</style>
<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 27px;
}

.el-aside {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 200px;

}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
<style scoped>
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
